import * as React from "react";
import { cn } from "@/lib/utils";

interface ColorPickerProps extends React.InputHTMLAttributes<HTMLInputElement> {
  showText?: boolean;
  format?: "hex" | "rgb" | "hsl";
}

const ColorPicker = React.forwardRef<HTMLInputElement, ColorPickerProps>(
  ({ className, showText = false, format = "hex", ...props }, ref) => {
    const [color, setColor] = React.useState(props.defaultValue || "#000000");

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
      const newColor = e.target.value;
      setColor(newColor);
      props.onChange?.(e);
    };

    return (
      <div className="flex items-center gap-2">
        <input
          type="color"
          ref={ref}
          className={cn(
            "h-10 w-16 cursor-pointer rounded border border-input bg-transparent",
            className
          )}
          value={color}
          onChange={handleChange}
          {...props}
        />
        {showText && (
          <span className="text-sm font-mono text-muted-foreground">
            {color}
          </span>
        )}
      </div>
    );
  }
);

ColorPicker.displayName = "ColorPicker";

export { ColorPicker };
